<template>
  <view v-if="isAdmin" class="main-admin">
    <!-- edit form begin -->
    <view class="form-box shadow">


      <view class="form-group">
        <view class="title must">登录账号</view>
        <input maxlength="20" placeholder="请填写登录账号" v-model="formName" />
        <view v-if="formNameFocus" class="hint-desc error">{{ formNameFocus }}</view>
      </view>

  

      <view class="form-group">
        <view class="title must">姓名</view>
        <input maxlength="20" placeholder="请填写管理员姓名" v-model="formDesc" />
      </view>
      <view v-if="formDescFocus" class="hint-desc error">{{ formDescFocus }}</view>
      
      <view class="form-group">
        <view class="title must">手机</view>
        <input maxlength="11" placeholder="请填写手机号码" v-model="formPhone" />
      </view>
      <view v-if="formPhoneFocus" class="hint-desc error">{{ formPhoneFocus }}</view>
      
      <view class="form-group">
        <view class="title must">密码</view>
        <input maxlength="20" type="password" placeholder="请填写密码" v-model="formPassword" />
      </view>
      <view v-if="formPasswordFocus" class="hint-desc error">{{ formPasswordFocus }}</view>
      
    </view> 
      
    <button @click="bindFormSubmit" class="btn-admin">确定添加</button>

  </view>
</template>

<script setup>
import { ref } from 'vue';
import { 
  adminAddadmin
 } from '@/request/api.js'
const isAdmin = ref(true); // 根据实际情况初始化
const formName = ref('');
const formNameFocus = ref('');
const formDesc = ref('');
const formDescFocus = ref('');
const formPhone = ref('');
const formPhoneFocus = ref('');
const formPassword = ref('');
const formPasswordFocus = ref('');
const verifyphone = ref(/^(?:(?:\+|00)86)?1[3-9]\d{9}$/);
function bindFormSubmit() {
  if(formName.value==""){
    formNameFocus.value='请输入账号'
    return;
  }else{
    formNameFocus.value=""
  }
  if(formDesc.value==""){
    formDescFocus.value='请填写姓名'
    return;
  }else{
    formDescFocus.value=""
  }
  if(formPhone.value==""){
    formPhoneFocus.value='请输入手机号码'
    return;
  }else if (!verifyphone.value.test(formPhone.value)) {
    formPhoneFocus.value='请输入正确的手机号码'
    return;
  }else{
    formPhoneFocus.value=""
  }
  if(formPassword.value==""){
    formPasswordFocus.value='请填写密码'
    return;
  }else{
    formPasswordFocus.value=""
  }
  adminAddadmin({
    accountNumber: formName.value,
    name: formDesc.value,
    phone:formPhone.value,
    password: formPassword.value
  }).then((res) => {
    console.log(res)
    if(res.data.code==200){
      uni.redirectTo({
        url: '/pages/admin/mgr/list/admin_mgr_list'
      });
    }else{
      uni.showToast({
          title: res.data.msg,
          icon: 'none'
        });
    }
  });
}
</script>


<style scoped>
.main-admin {
  padding: 20px;
  background-color: #f9f9f9;
}


.form-box {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.shadow {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 10px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 5px;
}

.must::after {
  content: '*';
  color: red;
  margin-left: 5px;
}

input {
  /* width: 100%; */
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

.hint-desc {
  font-size: 12px;
  color: red;
  margin-top: 5px;
}

.error {
  color: red;
}

.btn-admin {
  background-color: #007aff;
    color: white;
    /* padding: 10px 20px; */
    border-radius: 30px;
    /* font-size: 8px; */
    cursor: pointer;
    transition: background-color 0.3s;
    width: 277px;
    text-align: center;
    box-sizing: border-box;
    /* display: inline-block; */
    margin-top: 23px;
}

.btn-admin:hover {
  background-color: #0056b3;
}
</style>